<!-- 附件信息-->
<template>
  <el-dialog
    v-dialogDrag
    :visible="dialogFormVisible2"
    title="附件信息"
    :append-to-body="true"
    width="60%"
    :close-on-click-modal="false"
    @close="close1"
    @opened="open"
  >
    <dialogHeader
      slot="title"
      title="附件信息"
      :style-type="$store.state.app.dialogType"
    />
    <el-upload
      class="upload-demo"
      ref="upload"
      :http-request="handleChange"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-upload="beforeAvatarUpload"
      :before-remove="beforeRemove"
      limit="1"
      multiple
      :on-exceed="handleExceed"
      :file-list="fileList"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">
        请上传一个zip/rar文件，且不超过100M
      </div>
    </el-upload>
    <el-link
      type="primary"
      class="el-icon-download linkStyle"
      :underline="true"
      @click="fileDownload()"
      title="附件下载"
      style="font-size: 14px"
      target="_blank"
      >附件下载</el-link
    >
  </el-dialog>
</template>
<script>
import dialogHeader from "@/components/dialogHeader";
import OneTableTemplate from "@/components/templates/oneTable";

export default {
  name: "addEnclosure",
  components: {
    dialogHeader,
    OneTableTemplate,
  },
  props: {
    //   是否关闭弹窗
    dialogFormVisible2: {
      type: Boolean,
      default: false,
    },
    //附件名称
    attachmentName: {
      type: String,
    },
    //附件地址
    attachmentUrl: {
      type: String,
    },
    //是否修改页面
    popupsState: {
      type: String,
    },
  },
  data() {
    return {
      fileList: [],
      upList: {},
      href: "",
      // fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
    };
  },
  methods: {
    open() {
      // 如果父组件传过来回显的值，本页面无数据则添加数据并回显
      if (this.attachmentName) {
        if (this.fileList.length === 0) {
          this.fileList.push({});
        }
        this.$set(this.fileList[0], "name", this.attachmentName);
        this.$set(this.fileList[0], "url", this.attachmentUrl);
        // this.fileList[0].name = this.attachmentName;
        // this.fileList[0].url = this.attachmentUrl;
        this.upList.name = this.attachmentName;
        this.upList.url = this.attachmentUrl;
      } else {
        this.fileList = [];
      }
      // 如果为修改页面 则显示下载按钮
      let linkRow = document.getElementsByClassName("linkStyle")[0];
      if (this.popupsState === "edit") {
        linkRow.style.display = "block";
      } else {
        linkRow.style.display = "none";
      }
    },
    // 关闭弹窗清空列表  并传递当前附件信息
    close1() {
      if (this.fileList.length > 0) {
        this.fileList[0].name = "";
        this.fileList[0].url = "";
      }
      this.$emit("updateList", this.upList);
      this.$emit("update:dialog-form-visible2", false);
    },
    // 下载附件
    fileDownload() {
      if(!this.upList.name) return;

      const loading = this.$loading({ text: `正在下载附件` });
      this.$requestAPI({
        method: "GET",
        apiUrl: this.upList.url,
        variables:{
          dataType: 'excel'
        }
      })
        .then((res) => {
          this.$utils.downloadFile(res, this.upList.name);
        })
        .catch((err) => {})
        .finally(() => {
          loading.close();
        });
    },
    // 删除触发 将传递的附件信息清空
    handleRemove(file, fileList) {
      this.upList.name = "";
      this.upList.url = "";
    },
    beforeRemove() {},
    //
    handlePreview(file) {},
    // 上传类型以及大小设置
    beforeAvatarUpload(file) {
      // 大小限制
      if (file.size / 1024 / 1024 > 100) {
        this.$message({
          message: "上传文件大小不能超过 100MB!",
          type: "error",
        });
        return false;
      }
      // 类型限制
      let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      let bool = false;
      if (testmsg === "zip" || testmsg === "rar") {
        bool = true;
      } else {
        bool = false;
      }
      if (testmsg != "zip" && testmsg != "rar") {
        this.$confirm(`上传文件只能是zip/rar格式!`);
      }
      return bool;
    },
    handleExceed() {
      this.$message({
        message: "最多只能上传一个附件",
        type: "warning",
      });
      return false;
    },
    // 处理上传事件
    handleChange(param) {
      const url = "/mp/file/notice/upload.do";
      this.$requestUpload(url, param)
        .then((response) => {
          if (response.result === "1") {
            let code = "";
            const text = "";
            if (typeof response.path !== "undefined") {
              if (
                response.path.length > 0 &&
                response.path[0].length > 0 &&
                response.path[0][0].indexOf("|") > -1
              ) {
                // 返回格式：[["xxxx.png|/upload/{category}/{yyyyMMdd}/{guid}/xxxx.jpg","xxx.xx KB"]]
                // 截取出/upload/{category}/{yyyyMMdd}/{guid}/xxxx.jpg返回
                // this.modeCode = response.path[0][0].split('|')[1]
                this.upList.name = response.path[0][0].split("|")[0];
                this.upList.url = response.path[0][0].split("|")[1];
              }
            }
          } else {
            this.$message({ message: "文件上传失败", type: "warning" });
          }
        })
        .catch((err) => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.upload-demo {
  background-color: #fff;
  margin-left: 2%;
  margin-bottom: 2%;
  width: 70%;
}
.linkStyle {
  margin-top: 2%;
  margin-right: 5%;
  float: right;
}
</style>
